<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 09:12:13
-->

<template>
  <div id="leftConntainer2" style="height: 90%"></div>
</template>
<script>
// 请求方法的导入
import { Pie } from "@antv/g2plot";

import { get } from "../../../utils/request";
export default {
  data() {
    return {
      pieData: [],
    };
  },
  methods: {
    initChart() {
      //1、准备数据
      // const data = [
      //   { type: "离线", value: 27 },
      //   { type: "在线", value: 25 },
      // ];
      //2、初始化图标

      const piePlot = new Pie("leftConntainer2", {
        appendPadding: 10,
        data: this.pieData,
        angleField: "value",
        colorField: "type",
        radius: 1,
        innerRadius: 0.6,
        label: {
          type: "inner",
          offset: "-50%",
          content: "{value}",
          style: {
            textAlign: "center",
            fontSize: 14,
          },
        },
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
        ],
        statistic: {
          title: false,
          content: {
            // color: white,
            style: {
              color: "white",
              fontSize: 18,
              whiteSpace: "pre-wrap",
              overflow: "hidden",
              textOverflow: "ellipsis",
            },
            content: "设备总数26",
          },
        },
      });
      //3、执行绘画渲染
      piePlot.render();
    },
    getData() {
      get("/dashboard/queryDeviceOnlineNumber").then((res) => {
        // console.log(res);
        this.pieData = res.data;
        this.initChart();
      });
    },
  },
  computed: {},
  //vue 实例完全挂载到页面上
  created() {
    this.getData();
  },
};
</script>